$(function(){ 
    var base_url="http://localhost/JinDouChe/Public"
    //加载数据
　　$.ajax({
        type: "POST",
        url: "http://localhost/JinDouChe/index.php/Home/Index/getIndexData",
        data: {},
        dataType: "JSONP",
        success: function(data){
            var promo1=''
            var promo2=''
            var promo3=''
            var promo4=''
            if(data['promo_car']){
                for(var i in data['promo_car']){
                    var title=''
                    var first_class="";
                    switch (data['promo_car'][i]['is_promo']) {
                        case "1":
                            title="免首付"
                            first_class=' class="no_first_pay_car_former_pay"'
                            break;
                        case "2":
                            title="首付半价"
                            break;
                        case "3":
                            title="极速提车"
                            break;
                        default:
                            break;
                    }
                    
                    var name=data['promo_car'][i]['name']
                    var details=data['promo_car'][i]['details']
                    var first_pay=getMoneyText(data['promo_car'][i]['first_pay'])
                    var month_pay=getMoneyText(data['promo_car'][i]['month_pay'])
                    var url=base_url+"/Image/Cars/"+data['promo_car'][i]['carnum']+"/car1.jpg"
                    if(i==0){
                         promo1='<a href="#">\
                        <div class="no_first_pay_title">\
                            <span>'+title+'</span>\
                        </div>\
                        <div class="no_first_pay_content">\
                            <div class="no_first_pay_title_left">\
                                <div class="no_first_pay_title_left_content">\
                                    <div><span class="no_first_pay_car_name">'+name+'</span></div>\
                                    <div><span class="no_first_pay_car_info">'+details+'</span></div>\
                                    <div>\
                                        <span'+first_class+'>首付'+first_pay+'万</span>\
                                        <span class="no_first_pay_car_now_pay">月供'+month_pay+'元</span>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="no_first_pay_title_right">\
                                <img src="'+url+'">\
                            </div>\
                            <div class="clearfix"></div>\
                        </div>\
                    </a>'
                    }else {
                        var promo_str='<div class="half_first_pay_part">\
                                <a href="#">\
                                    <div class="half_first_pay_title">\
                                        <span>'+title+'</span>\
                                    </div>\
                                    <div class="half_first_pay_content">\
                                        <img src="'+url+'">\
                                        <span>'+name+'</span>\
                                        <span'+first_class+'>首付'+first_pay+'万</span>\
                                        <span>月供'+month_pay+'元</span>\
                                    </div>\
                                </a>\
                            </div>'
                        if(i>0 && i<=3){
                            promo2+=promo_str
                        }else if(i>4 && i<=7){
                            promo3+=promo_str
                        }else{
                            promo4+=promo_str
                        }

                    }
                }
            }
            var new_car=""
            if(data['new_car']){
                
                for(var i in data['new_car']){
                    var name=data['new_car'][i]['name']
                    var details=data['new_car'][i]['details']
                    var first_pay=getMoneyText(data['new_car'][i]['first_pay'])
                    var month_pay=getMoneyText(data['new_car'][i]['month_pay'])
                    var url=base_url+"/Image/Cars/"+data['new_car'][i]['carnum']+"/car1.jpg"
                    new_car+='<div class="index_new_car_option">\
                            <a href="#">\
                                <span class="index_new_car_option_new_icon">new</span>\
                                <img src="'+url+'">\
                                <div><span class="no_first_pay_car_name">'+name+'</span></div>\
                                <div><span class="no_first_pay_car_info">'+details+'</span></div>\
                                <div>\
                                    <span class="no_first_pay_car_former_pay new_former_pay">首付'+first_pay+'万</span>\
                                    <span class="no_first_pay_car_now_pay">月供'+month_pay+'元</span>\
                                </div>\
                            </a>\
                        </div>'
                }
                
            }
            var hot_car=""
            if(data['hot_car']){
                
                for(var i in data['hot_car']){
                    var name=data['hot_car'][i]['name']
                    var details=data['hot_car'][i]['details']
                    var first_pay=getMoneyText(data['hot_car'][i]['first_pay'])
                    var month_pay=getMoneyText(data['hot_car'][i]['month_pay'])
                    var desc=data['hot_car'][i]['desc']
                    var url=base_url+"/Image/Cars/"+data['hot_car'][i]['carnum']+"/car1.jpg"
                    hot_car+='<div class="index_new_car_option">\
                            <a href="#">\
                                <span class="index_new_car_option_new_icon hot_icon">hot</span>\
                                <img src="'+url+'">\
                                <div><span class="no_first_pay_car_name">'+name+'</span></div>\
                                <div><span class="no_first_pay_car_info">'+details+'</span></div>\
                                <div>\
                                    <span class="no_first_pay_car_former_pay new_former_pay">首付'+first_pay+'万</span>\
                                    <span class="no_first_pay_car_now_pay">月供'+month_pay+'元</span>\
                                </div>\
                                <span class="new_car_flagtip">'+desc+'</span>\
                            </a>\
                        </div>'
                }
                
            }
            var content='<div class="swiper-container index_top_slide" id="index_top_slide">\
                <div class="swiper-wrapper">\
                    <div class="swiper-slide">\
                        <a href="#"><img src="http://localhost/JinDouChe/Public/Home/images/car1.jpg"></a>\
                    </div>\
                    <div class="swiper-slide">\
                        <a href="#"><img src="http://localhost/JinDouChe/Public/Home/images/car1.jpg"></a>\
                    </div>\
                    <div class="swiper-slide">\
                        <a href="#"><img src="http://localhost/JinDouChe/Public/Home/images/car1.jpg"></a>\
                    </div>\
                </div>\
                <!-- 如果需要分页器 -->\
                <div class="swiper-pagination"></div>\
            </div>\
            <div class="index_new_car">\
                <div class="index_new_car_title">\
                    <span>新车</span>\
                </div>\
                <div class="index_new_car_brand">\
                    <div class="new_car_brand">\
                        <a href="#" class="car_img_span">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/brand-41.png">\
                            <span>大众</span>\
                        </a>\
                        <a href="#" class="first_pay">\
                            首付1万\
                        </a>\
                    </div>\
                    <div class="new_car_brand">\
                        <a href="#" class="car_img_span">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/brand-29.png">\
                            <span>标致</span>\
                        </a>\
                        <a href="#" class="first_pay">\
                            1~2万\
                        </a>\
                    </div>\
                    <div class="new_car_brand">\
                        <a href="#" class="car_img_span">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/brand-27.png">\
                            <span>本田</span>\
                        </a>\
                        <a href="#" class="first_pay">\
                            2~3万\
                        </a>\
                    </div>\
                    <div class="new_car_brand">\
                        <a href="#" class="car_img_span">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/brand-53.png">\
                            <span>福特</span>\
                        </a>\
                        <a href="#" class="first_pay">\
                            3~4万\
                        </a>\
                    </div>\
                    <div class="new_car_brand">\
                        <a href="#" class="car_img_span">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/brand-30.png">\
                            <span>别克</span>\
                        </a>\
                        <a href="#" class="first_pay">\
                            4~5万\
                        </a>\
                    </div>\
                    <div class="clearfix"></div>\
                </div>\
            </div>\
            <div class="swiper-container first_pay_slide" id="first_pay_slide">\
                <div class="swiper-wrapper">\
                    <div class="swiper-slide">\
                        <div class="no_first_pay">\
                            '+promo1+'\
                            <div class="half_first_pay">\
                                '+promo2+'\
                                <div class="clearfix"></div>\
                            </div>\
                        </div>\
                    </div>\
                    <div class="swiper-slide">\
                        <div class="half_first_pay">\
                            '+promo3+'\
                            <div class="clearfix"></div>\
                        </div>\
                        <div class="half_first_pay">\
                            '+promo4+'\
                            <div class="clearfix"></div>\
                        </div>\
                    </div>\
                </div>\
                <!-- 如果需要分页器 -->\
                <div class="swiper-pagination"></div>\
            </div>\
            <div class="new_product">\
                <div class="index_new_car_title">\
                    <span>新品上架</span>\
                </div>\
                <div class="index_new_car_container">\
                    '+new_car+'\
                    <div class="clearfix"></div>\
                </div>\
            </div>\
            <div class="new_product">\
                <div class="index_new_car_title">\
                    <span>新车热销</span>\
                </div>\
                <div class="index_new_car_container">\
                    '+hot_car+'\
                    <div class="clearfix"></div>\
                </div>\
            </div>\
            <div class="new_product">\
                <div class="index_new_car_title">\
                    <span>车主故事</span>\
                </div>\
                <div class="swiper-container car_owner_story" id="car_owner_story">\
                    <div class="swiper-wrapper">\
                        <div class="swiper-slide">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/cloth1.jpg">\
                            <div>\
                                <span class="car_owner_story_title">小个子女生的路虎梦</span>\
                            </div>\
                            <div>\
                                <span class="car_owner_story_info">车主： 林女士·寿险规划师</span>\
                            </div>\
                        </div>\
                        <div class="swiper-slide">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/cloth2.jpg">\
                            <div>\
                                <span class="car_owner_story_title">小个子女生的路虎梦</span>\
                            </div>\
                            <div>\
                                <span class="car_owner_story_info">车主： 林女士·寿险规划师</span>\
                            </div>\
                        </div>\
                        <div class="swiper-slide">\
                            <img src="http://localhost/JinDouChe/Public/Home/images/cloth4.jpg">\
                            <div>\
                                <span class="car_owner_story_title">小个子女生的路虎梦</span>\
                            </div>\
                            <div>\
                                <span class="car_owner_story_info">车主： 林女士·寿险规划师</span>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
            </div>\
            <div class="new_product">\
                <div class="index_new_car_title question_title_border">\
                    <span>弹弹问答</span>\
                </div>\
                <div class="question_answer">\
                    <div class="question_answer_container">\
                        <div class="index_question" id="index_question_1">\
                            <div class="index_question_dot"><span></span></div>\
                            <span class="index_question_words">弹个车的购车流程是怎样的呢？</span>\
                            <i class="fa fa-angle-down"></i>\
                            <div class="clearfix"></div>\
                        </div>\
                        <div class="index_answer hidden" id="index_answer_1">\
                            <p>购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>1.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>2.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>3.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>4.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                        </div>\
                    </div>\
                </div>\
                <div class="question_answer">\
                    <div class="question_answer_container">\
                        <div class="index_question" id="index_question_2">\
                            <div class="index_question_dot"><span></span></div>\
                            <span class="index_question_words">弹个车的购车流程是怎样的呢？</span>\
                            <i class="fa fa-angle-down"></i>\
                            <div class="clearfix"></div>\
                        </div>\
                        <div class="index_answer hidden" id="index_answer_2">\
                            <p>购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>1.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>2.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>3.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                            <p>4.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>\
                        </div>\
                    </div>\
                </div>\
                <div class="question_answer_more">\
                    <a href="#">查看更多</a>\
                </div>\
            </div>\
            <div class="bottom_logo">\
                <img src="http://localhost/JinDouChe/Public/Home/images/logo_che.png">\
            </div>'
            $('.index_body_content').append(content)
            bindEvent();
        }
    });
    function getMoneyText(number){
        if(number>10000){
            number=(number/10000).toFixed(2)
        }
        return number;
    }
    function bindEvent() {
        var mySwiper = new Swiper ('#index_top_slide', {
            loop: true,
            autoplay : 3000,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable :true

        });
        var mySwiper = new Swiper ('#first_pay_slide', {
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable :true

        });
        var mySwiper = new Swiper ('#car_owner_story', {
            slidesPerView : 1.3,
            spaceBetween : 10
        });
        $("#index_question_1").click(function(){
            $("#index_answer_1").slideToggle();
            $("#index_question_1 .fa").toggleClass("fa-angle-down");
            $("#index_question_1 .fa").toggleClass("fa-angle-up");
        });
        $("#index_question_2").click(function(){
            $("#index_answer_2").slideToggle();
            $("#index_question_2 .fa").toggleClass("fa-angle-down");
            $("#index_question_2 .fa").toggleClass("fa-angle-up");
        })
    }
}); 